<template>
    <div>
        <!--顶部筛选区域-->
        <el-row :gutter="20">
            <el-col :span="24">
                <el-input v-model="form.name" clearable placeholder="请输入名称" style="max-width: 220px;" @clear="_getClassList(1)"></el-input>
                <el-select v-model="form.area" clearable placeholder="请选择区域" @clear="clearArea">
                    <el-option
                        v-for="item in areaList"
                        :key="item.id"
                        :label="item.name"
                        :value="item.id">
                    </el-option>
                </el-select>
                <el-select v-model="form.store" clearable placeholder="请选择门店" @clear="clearStore">
                    <el-option
                        v-for="item in storeList"
                        :key="item.id"
                        :label="item.name"
                        :value="item.id">
                    </el-option>
                </el-select>
                <el-button style="margin-left: 20px;" @click="_getClassList(1)">搜索</el-button>
                <el-button type="primary" @click="add" style="float: right">添加课包</el-button>
            </el-col>
        </el-row>

        <!--表格开始-->
        <el-table :data="tableData" v-loading="loading" style="width: 100%;margin-top: 15px;" :header-cell-style="{background:'#eef1f6',color:'#606266'}">
            <el-table-column
                type="index"
                width="70"
                label="排序">
            </el-table-column>
            <el-table-column
                    label="课包名称">
                <template slot-scope="scope">
                    <span>{{ scope.row.name }}</span>
                </template>
            </el-table-column>
            <el-table-column
                    label="节数">
                <template slot-scope="scope">
                    <span>{{ scope.row.class_num }}</span>
                </template>
            </el-table-column>
            <el-table-column
                    label="原价/优惠价(元)">
                <template slot-scope="scope">
                    <span>{{ scope.row.price }}/{{ scope.row.original_price }}</span>
                </template>
            </el-table-column>
            <el-table-column
                    label="时效(月)">
                <template slot-scope="scope">
                    <span>{{ scope.row.time_limit }}</span>
                </template>
            </el-table-column>
            <el-table-column
                    label="对应区域">
                <template slot-scope="scope">
                    <span>{{ scope.row.merch_name }}</span>
                </template>
            </el-table-column>
            <el-table-column
                    label="对应门店">
                <template slot-scope="scope">
                    <span>{{ scope.row.store_name }}</span>
                </template>
            </el-table-column>
            <el-table-column label="操作" width="160">
                <template slot-scope="scope">
                    <el-button
                            size="mini"
                            type="primary"
                            @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                    <el-button
                            size="mini"
                            type="danger"
                            @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>

        <!--分页-->
        <Pagination @handleClickPage="currentPage" :total="total - 0"></Pagination>

        <!--添加课包的dialog-->
        <el-dialog
            :visible.sync="dialogAdd"
            width="50%"
            @close="dialogAddClose">
            <!--这里的插槽会替换title显示的内容-->
            <div slot="title" class="header-title">
                <p class="title-name">新建课包规格</p>
                <p class="title-info">课包与合同是对应关系，操作之前请优先创建合同</p>
            </div>
            <el-form :model="addForm" :rules="addRules" ref="addForm" label-width="100px" class="demo-ruleForm">
                <el-form-item label="课包名称" prop="name">
                    <el-input v-model="addForm.name" placeholder="请为该课包命名" style="width: 204px"></el-input>
                </el-form-item>
                <el-form-item label="课包节数" prop="class_num">
                    <el-input v-model="addForm.class_num" placeholder="请填写课包节数" style="width: 204px"></el-input>&nbsp;&nbsp;&nbsp;/节
                </el-form-item>
                <el-form-item label="课包价格" required style="display: flex;">
                    <el-form-item prop="price" style="margin-right: 20px;">
                        <el-input v-model="addForm.price" placeholder="课包优惠价(合同支付金额)"></el-input>
                    </el-form-item>
                    <el-form-item prop="original_price">
                        <el-input v-model="addForm.original_price" placeholder="课包原价(划线价格)"></el-input>
                    </el-form-item>
                </el-form-item>
                <el-form-item label="课包时效" prop="time_limit">
                    <el-input v-model="addForm.time_limit" placeholder="请填写课包节数" style="width: 204px"></el-input>&nbsp;&nbsp;&nbsp;/月
                </el-form-item>
                <el-form-item label="选择合同" prop="contract_id">
                    <el-select v-model="addForm.contract_id" placeholder="请选择合同" style="width: 32%;max-width: 32%;">
                        <el-option :label="item.name" :value="item.id" v-for="item in options" :key="item.id"></el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogAdd = false">取 消</el-button>
                <el-button type="primary" @click="dialogAddSure">确 定</el-button>
            </span>
        </el-dialog>

        <!--编辑课包的dialog-->
        <el-dialog
                :visible.sync="dialogEdit"
                width="50%">
            <!--这里的插槽会替换title显示的内容-->
                    <div slot="title" class="header-title">
                        <p class="title-name">修改课包规格</p>
                        <p class="title-info">课包与合同是对应关系，操作之前请优先创建合同</p>
                    </div>
            <el-form :model="editForm" :rules="addRules" ref="editForm" label-width="100px" class="demo-ruleForm">
                <el-form-item label="课包名称" prop="name">
                    <el-input v-model="editForm.name" placeholder="请为该课包命名" style="width: 204px"></el-input>
                </el-form-item>
                <el-form-item label="课包节数" prop="count">
                    <el-input v-model="editForm.class_num" placeholder="请填写课包节数" style="width: 204px"></el-input>&nbsp;&nbsp;&nbsp;/节
                </el-form-item>
                <el-form-item label="课包价格" required style="display: flex;">
                    <el-form-item prop="vipPrice" style="margin-right: 20px;">
                        <el-input v-model="editForm.price" placeholder="课包优惠价(合同支付金额)"></el-input>
                    </el-form-item>
                    <el-form-item prop="originalPrice">
                        <el-input v-model="editForm.original_price" placeholder="课包原价(划线价格)"></el-input>
                    </el-form-item>
                </el-form-item>
                <el-form-item label="课包时效" prop="time">
                    <el-input v-model="editForm.time_limit" placeholder="请填写课包节数" style="width: 204px"></el-input>&nbsp;&nbsp;&nbsp;/月
                </el-form-item>
                <el-form-item label="选择合同" prop="contract_id">
                    <el-select v-model="editForm.contract_id" placeholder="请选择合同" style="width: 32%;max-width: 32%;" @change="selContract">
                        <el-option :label="item.name" :value="item.id" v-for="item in options" :key="item.id"></el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogEdit = false">取 消</el-button>
                <el-button type="primary" @click="dialogEditSure">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
    import Pagination from '../../components/pagination'
    import { signContractList, merchList, storeList } from '../../api/signContractApi'
    import { getClassList, addClass, editClass, batchEdit } from '../../api/signClassApi'
    export default {
        name: "class-specification",
        data() {
            return{
                form: {
                    name: '',
                    area: '',
                    store: ''
                },
                // 添加课包的表单
                addForm: {
                    name: '',
                    class_num: '',
                    price: '',
                    original_price: '',
                    time_limit: '',
                    contract_id: ''
                },
                // 编辑课包的表单
                editForm: {},
                loading: true,
                areaList: [],
                storeList: [],
                page: 1, // 当前页数
                addRules: {
                    name: [
                        { required: true, message: '请输入课包名称', trigger: 'blur' },
                    ],
                    class_num: [
                        { required: true, message: '请输入课包节数', trigger: 'blur' },
                        // { type: 'number', message: '课包必须为数字值'}
                    ],
                    price: [
                        { required: true, message: '请输入课优惠价', trigger: 'blur' },
                        // { type: 'number', message: '价格必须为数字值'}
                    ],
                    original_price: [
                        { required: true, message: '请输入课包原价', trigger: 'blur' },
                        // { type: 'number', message: '价格必须为数字值'}
                    ],
                    time_limit: [
                        { required: true, message: '请输入课包时效', trigger: 'blur' },
                        // { type: 'number', message: '时效必须为数字值'}
                    ],
                    contract_id: [
                        { required: true, message: '请选择合同', trigger: 'change' },
                    ]
                },
                options: [],
                tableData: [],
                total: '',
                dialogAdd: false,
                dialogEdit: false,
            }
        },
        created() {
            this._getClassList(this.page) // 获取课包列表
            this._signContractList() // 获取合同列表
            this._merchList() // 区域
            this._storeList() // 门店
        },
        methods: {
            // 获取课包列表
            async _getClassList(page) {
                let params = {p: page, length: 10, name: this.form.name}
                const { data } = await getClassList(params)
                console.log(data)
                this.tableData = data.list
                this.total = data.total
                this.loading = false
            },
            // 合同列表
            async _signContractList() {
                const res = await signContractList()
                if (res.code === 0) {
                    console.log(res)
                    this.options = res.data.list
                }
            },
            // 区域列表
            async _merchList() {
                let params = {status: 1}
                const res = await merchList(params)
                if (res.code === 0) {
                    // console.log(res)
                    this.areaList = res.data.merch
                }
            },
            // 门店列表
            async _storeList() {
                let params = {status: 1}
                const res = await storeList(params)
                if (res.code === 0) {
                    console.log(res)
                    this.storeList = res.data.store
                }
            },
            // 清空区域
            clearArea() {
                console.log(this.form)
            },
            // 清空门店
            clearStore() {
                console.log(this.form)
            },
            // 编辑
            async handleEdit(index, row) {
                console.log(index, row)
                this.editForm = row
                this.editForm.contract_id = this.editForm.contract_id - 0
                this.dialogEdit = true
            },
            // 删除
            handleDelete(index, row) {
                console.log(index, row)
                let arr = []
                arr.push(row.id)
                let params = {ids: arr, delete: 1}
                this.$confirm('此操作将永久删除该课包, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(async () => {
                    const res = await batchEdit(params)
                    if (res.code === 0) {
                        // console.log(res)
                        this.$message.success('删除成功!')
                        this._getClassList(this.page)
                    }
                }).catch(() => {
                    this.$message.info('已取消删除')
                })
            },
            // 分页的 当前点击的页数
            currentPage(data) {
                console.log(`当前页: ${data}`)
                this.page = data
                this.loading = true
                this._getClassList(this.page)
            },
            // 添加课包的确定事件
            dialogAddSure() {
                this.$refs.addForm.validate(async valid => {
                    console.log(valid)
                    if (!valid) return false
                    // 这里发送 确定的请求
                    console.log(this.addForm)
                    let form = {...this.addForm}
                    form.class_num = form.class_num - 0
                    form.price = form.price - 0
                    form.original_price = form.original_price - 0
                    form.time_limit = form.time_limit - 0
                    // const res = await addClass(this.addForm)
                    const res = await addClass(form)
                    if (res.code === 0) {
                        console.log(res)
                        this._getClassList(this.page)
                        this.$message.success('添加成功')
                        this.dialogAdd = false
                    }
                })
            },
            // 添加课包
            async add() {
                this.dialogAdd = true
            },
            // 添加课包的dialog关闭事件
            dialogAddClose() {
                this.$refs.addForm.resetFields()
            },
            // 选择合同
            selContract(val) {
                console.log(val)
                this.editForm.contract_id = val
            },
            // 修改课包的确定事件
            dialogEditSure() {
                this.$refs.editForm.validate(async valid => {
                    console.log(valid)
                    if (!valid) return false
                    // 这里发送 确定的请求
                    let params = {
                        name: this.editForm.name,
                        class_num: this.editForm.class_num - 0,
                        price: this.editForm.price - 0,
                        original_price: this.editForm.original_price - 0,
                        time_limit: this.editForm.time_limit - 0,
                        contract_id: this.editForm.contract_id,
                        id: this.editForm.id
                    }
                    console.log(params)
                    const res = await editClass(params)
                    if (res.code === 0) {
                        console.log(res)
                        this.$message.success('修改成功')
                        this.dialogEdit = false
                        this._getClassList(this.page)
                    }
                })

            }
        },
        components: {
            Pagination
        },
    }
</script>

<style scoped lang="scss">
    .header-title {
        .title-name {
            font-size: 18px;
            color: #333;
            font-weight: 600;
            margin-bottom: 0;
        }
        .title-info {
            font-size: 11px;
            color: #7d7d7d;
            margin-bottom: 0;
            margin-top: 4px;
        }
    }
</style>
